import * as THREE from 'three';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
camera.position.set( 0, 0,200 );
camera.lookAt(0, 0, 0);
const axesHelper = new THREE.AxesHelper( 200 );
scene.add( axesHelper );

const renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
const controls = new OrbitControls(camera, renderer.domElement);

// 椭圆曲线
const arc = new THREE.EllipseCurve(0, 0, 100, 50);
const points = arc.getPoints( 20 );
const geometry = new THREE.BufferGeometry().setFromPoints( points );
const material = new THREE.PointsMaterial( { color: 0xff0000,size:10 } );
const pointMesh = new THREE.Points( geometry, material );
scene.add( pointMesh );

const material2 = new THREE.LineBasicMaterial( { color: 0x0000ff } );
const geometry2 = new THREE.BufferGeometry().setFromPoints( points );
const line2 = new THREE.Line( geometry2, material2 );
scene.add( line2 );

// 样条曲线
const arr = [
    new THREE.Vector2( -100, 0 ),
	new THREE.Vector2( -50, 50 ),
	new THREE.Vector2( 0, 0 ),
	new THREE.Vector2( 50, -50 ),
	new THREE.Vector2( 100, 0 )
];
const splineCurve = new THREE.SplineCurve( arr );
const points3 = splineCurve.getPoints( 20 );
const geometry3 = new THREE.BufferGeometry().setFromPoints( points3 );
const material3 = new THREE.LineBasicMaterial( { color: 0x00ff00 } );
const line3 = new THREE.Line( geometry3, material3 );
scene.add( line3 );

// 贝塞尔曲线
//第一个和第三个为端点,第二个为控制点
const p1 = new THREE.Vector2(0,0);
const p2 = new THREE.Vector2(80,200);
const p3 = new THREE.Vector2(100,0);
const curve = new THREE.QuadraticBezierCurve( p1, p2, p3 );
const points4 = curve.getPoints( 20 );
const geometry4 = new THREE.BufferGeometry().setFromPoints( points4 );
const material4 = new THREE.LineBasicMaterial( { color: 0xffff00 } );
const line4 = new THREE.Line( geometry4, material4 );
scene.add( line4 );
//贝塞尔曲线控制点
const material5 = new THREE.PointsMaterial( { color: "pink",size:10 } );
const geometry5 = new THREE.BufferGeometry().setFromPoints( [p1,p2,p3] );
const pointMesh2 = new THREE.Points( geometry5, material5 );
//各类图形集成自Object3D
// 添加对象到这个对象的子级，可以添加任意数量的对象
line4.add( pointMesh2 );

// 三次贝塞尔曲线
//第一个和第四个点是端点，中间两个是控制点
const p_1 = new THREE.Vector3(-100, 0, 0);
const p_2 = new THREE.Vector3(50, 100, 0);
const p_3 = new THREE.Vector3(100, 0, 100);
const p_4 = new THREE.Vector3(100, 0, 0);
const curve2 = new THREE.CubicBezierCurve3( p_1, p_2, p_3, p_4 );
const points5 = curve2.getPoints( 20 );
const geometry6 = new THREE.BufferGeometry().setFromPoints( points5 );
const material6 = new THREE.LineBasicMaterial( { color: 0x00ffff } );
const line6 = new THREE.Line( geometry6, material6 );
scene.add( line6 );

//curvepath 曲线复合
const path_p1 = new THREE.Vector2(0, 0);
const path_p2 = new THREE.Vector2(100, 100);
const path_line1 = new THREE.LineCurve(path_p1, path_p2);

const path_arc = new THREE.EllipseCurve(0, 100, 100 , 100, 0, Math.PI);

const path_p3 = new THREE.Vector2(-100, 100);
const path_p4 = new THREE.Vector2(0, 0);
const path_line2 = new THREE.LineCurve(path_p3, path_p4);

const curvePath = new THREE.CurvePath();
curvePath.add(path_line1);
curvePath.add(path_arc);
curvePath.add(path_line2);
const path_pointsArr = curvePath.getPoints(20);
const path_geometry = new THREE.BufferGeometry();
path_geometry.setFromPoints(path_pointsArr);

const path_material = new THREE.LineBasicMaterial({
    color: new THREE.Color('blue')
});

const resultCurve = new THREE.Line(path_geometry, path_material);
scene.add(resultCurve);




function animate() {
    renderer.render( scene, camera );
    requestAnimationFrame( animate );
}
animate();